<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click.stop="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
      />
      <!-- #ifndef MP-WEIXIN -->
      绑定二维码
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text @click="fanhui" style="margin-left: 75rpx">绑定二维码</text>
      <!-- #endif -->
    </view>
    <view class="center">
      <view class="center_logo">
        <image
          class="image"
          src="https://pic.bangbangtongcheng.com/static/bbcz/QRlogo.png"
          mode=""
        ></image>
        <view class=""> 帮帮同城 </view>
      </view>
      <!-- 上传图片 -->
      <view class="uploadPhotos">
        <view class="uploadPhotos_left">
          <view class="title"> 车牌照片 </view>
          <view class="images">
            <imageUploadCropper
              class="image"
              v-model="headerImage"
              :lengthNum="1"
              selWidth="600rpx"
              selHeight="400rpx"
              :ratio="1.5"
              @returnSuccess="obtainLicense"
              :sourceType="['camera']"
            ></imageUploadCropper>
          </view>
        </view>
        <view class="uploadPhotos_right">
          <view class="title">示例图</view>
          <image
            class="image"
            src="https://pic.bangbangtongcheng.com/f45284482fdf481092c195f661d0770a"
            mode="aspectFit"
          ></image>
        </view>
      </view>
      <!-- 数据表单 -->
      <view class="from">
        <view class="from_phone">
          <span>手机号</span>
          <input class="inputs" type="digit" v-model="phone" maxlength="11" disabled />
        </view>
        <view class="from_cp">
          <span>车牌号</span>
          <input class="inputs" type="text" maxlength="7" v-model="licensePlate" disabled />
        </view>
      </view>
      <view class="agreement">
        <checkbox-group class="checkbox-group" @change="checkboxC">
          <label>
            <checkbox
              value="1"
              class="round blue"
              :checked="status"
              :style="status ? 'background:#007aff' : ''"
            />
          </label>
        </checkbox-group>
        <view class="text">
          <text>确认绑定即默认同意</text>
          <span class="tags" @click="tags(2)">《帮帮同城隐私政策》</span>
          <span class="tags" @click="tags(3)">《帮帮同城用户协议》</span>
        </view>
      </view>
      <view class="qrbd" @click="confirmBind()"> 确认绑定 </view>
      <view class="dibuwenb">
        {{ disclaimers }}
      </view>
    </view>
    <uni-popup ref="binds" mode="center">
      <view class="binds_frame">
        <view class="binds_frame_t">车牌号已绑定二维码</view>
        <view class="binds_frame_c">
          <view class=""> 是否要解绑车牌号{{ licensePlate }}， 替换为新的二维码？ </view>
          <view class="">
            我们将向绑定的手机(尾号{{
              bindPhone.substring(bindPhone.length - 4, bindPhone.length)
            }})发送验证码
          </view>
        </view>
        <view class="verificationCode">
          <view class="">
            <u-code-input mode="line" v-model="yzm" :maxlength="6"></u-code-input>
          </view>
          <view class="getcode" @click="getcode">{{ content }}</view>
        </view>
        <view class="binds_frame_b">
          <view class="cancel" @click="jcbdCancel">取消</view>
          <view class="determine" v-if="yzm.length == 6" @click="Replace">替换</view>
          <view class="determine" style="background-color: #ccc" v-else>替换</view>
        </view>
      </view>
    </uni-popup>

    <view class="motaikuang" v-show="show1" @click="show1 = false">
      <div class="verify" @click.stop="aaa">
        <verify :show="show1" @Handle="Handle"></verify>
      </div>
    </view>
    <view class="motaikuang1" v-show="show" @click="show = false">
      <view class="text" @click.stop="aaa">
        <view class="textTitle">{{ text }}</view>
        <scroll-view class="scroll-view" scroll-y :scroll-top="scrollTop" @scroll="scrollTop2">
          <!-- <rich-text :nodes="data.content"></rich-text> -->
          <!-- #ifdef MP-WEIXIN -->
          <mp-html :content="data.content"></mp-html>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <mp-html :content="data.content"></mp-html>
          <!-- #endif -->
        </scroll-view>
      </view>
    </view>
    <uni-popup ref="binds22" type="center" :isMaskClick="true">
      <view class="uni-popup-wrapper" style="">
        <view class="uni-popup-title"> 温馨提示 </view>
        <view class="uni-popup-content">
          <!-- #ifdef MP-WEIXIN -->
          <mp-html :content="html"></mp-html>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <mp-html :content="html"></mp-html>
          <!-- #endif -->
          <!-- <view class="" style="white-space: nowrap;">
						同一车牌号6个月内可绑定<text class="uni-popup-mark">3</text>次二维码
					</view>
					<view class="">
						超出将无法绑定，请谨慎操作。
					</view>
					<view class="">
						本次为第<text class="uni-popup-mark">2</text>次绑定
					</view> -->
        </view>
        <button class="uni-popup-btn-one cu-btn" @click="confirm">确定</button>
      </view>
    </uni-popup>
    <uni-popup ref="binds33" type="center" :isMaskClick="true">
      <view class="uni-popup-wrapper" style="">
        <view class="uni-popup-title"> 温馨提示 </view>
        <view class="uni-popup-content">
          <view class="" style="white-space: nowrap">
            同一车牌号6个月内可绑定<text class="uni-popup-mark">3</text>次二维码
          </view>
          <view class=""> 超出将无法绑定，请谨慎操作。 </view>
          <view class="">
            本次为第<text class="uni-popup-mark">{{ checkNum }}</text
            >次绑定
          </view>
        </view>
        <button class="uni-popup-btn-one cu-btn" @click="confirm33" v-if="checkNum <= 3">
          确定
        </button>
      </view>
    </uni-popup>
    <uni-popup ref="binds44" type="center" :isMaskClick="true">
      <view class="uni-popup-wrapper" style="">
        <view class="uni-popup-title"> 温馨提示 </view>
        <view class="uni-popup-content">
          <view class="" style="white-space: nowrap">
            同一车牌号6个月内可绑定<text class="uni-popup-mark">3</text>次二维码
          </view>
          <view class=""> 您已超出限制次数，无法绑定 </view>
          <view class=""> {{ days }}天后可再次绑定 </view>
        </view>
        <button class="uni-popup-btn-one cu-btn" @click="confirm44">确定</button>
      </view>
    </uni-popup>
    <!-- #ifdef MP-WEIXIN -->
    <cropper ref="croop" v-show="showCroop" :quality="1" resize: false :canScale="true"
    selWidth="600rpx" selHeight="400rpx" style='z-index:1000' @upload="myUpload" class="userHeader"
    />
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN-->
    <gmy-img-cropper
      ref="gmyImgCropper"
      quality="1"
      cropperType="ratio"
      :ratio="1.5"
      fileType="png"
      imgSrc=""
      style="z-index: 1000"
      @getImg="myUpload"
    >
    </gmy-img-cropper>
    <!-- #endif -->
    <uniBall></uniBall>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  //#ifdef MP-WEIXIN
  import cropper from '../../components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue'
  //#endif
  // #ifndef MP-WEIXIN
  import gmyImgCropper from '../../components/gmy-img-cropper/gmy-img-cropper.vue'
  //#endif
  import Verify from '@/components/VueImageVerify.vue'
  import imageUploadCropper from '@/components/imageUploadCropper.vue'
  export default {
    components: {
      // #ifndef MP-WEIXIN
      gmyImgCropper,
      //#endif
      //#ifdef MP-WEIXIN
      cropper,
      //#endif
      verify: Verify,
      imageUploadCropper,
    },
    data() {
      return {
        imgUrl: this.$imgSrc,
        userInfo: uni.getStorageSync('Pduser'),
        headerImage: [],
        // 车牌号
        licensePlate: '',
        phone: '',
        checkBoxs: '',
        status: false,
        curTarget: 0,
        show: false,
        show1: false,
        text: '',
        scrollTop: 0,
        data: {},
        content: '获取验证码',
        canClick: true,
        totalTime: 60,
        code: '',
        // 验证码
        yzm: '',
        bindPhone: '',
        codeId: '',
        merchantId: '',
        disclaimers: '',
        html: '',
        // 小程序裁剪是否展示
        showCroop: false,
        checkNum: 0,
        days: 0,
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onReady() {},
    onLoad(options) {
      this.codeId = options.codeId || ''
      // ||'2lDxgJQO' ara0CkNS 36nNvSQV b9YsIbRt
      this.merchantId = options.merchantId || ''
      // ||'53' 1
      this.phone = this.userInfo.phone
      this.Disclaimers()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    methods: {
      confirm() {
        this.$refs.binds22.close()
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages_my/bangClub',
          })
        })
      },
      changeImage(e) {
        console.log(e)
      },
      // 免责声明
      Disclaimers() {
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: '13',
          })
          .then((res) => {
            console.log(res, '123')
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      // 上传图片获取车牌号
      obtainLicense() {
        if (this.headerImage.length == 0) {
          this.licensePlate = ''
          return
        }
        this.$myRequest
          .post('/api/mobile/public/licensePlateRecognition', {
            photoUrl: this.headerImage[0],
          })
          .then((res) => {
            console.log(res, '345')
            this.licensePlate = res.licensePlateRecognition.words_result.number
          })
      },
      Replace() {
        let that = this
        if (!this.yzm) {
          uni.showToast({
            title: '请输入验证码',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (this.yzm != this.code) {
          uni.showToast({
            title: '验证码输入错误',
            icon: 'none',
            mask: true,
          })
          return
        }
        let data = {}
        data = {
          userId: this.userInfo.id,
          codeId: this.codeId,
          licensePlatePhoto: this.headerImage[0],
          cellphoneNumber: this.bindPhone || '',
          phone: this.phone,
          licensePlateNumber: this.licensePlate,
          SMS_VerificationCode: this.yzm,
        }
        if (this.replaceLoading) {
          return false
        }
        this.replaceLoading = true
        this.$myRequest.post('/api/mobile/vehicleOwner/replaceQRCode', data).then((res) => {
          console.log(res, '3456')
          if (res.code == '60029') {
            this.html = res.msg
            this.$refs.binds22.open()
            return
          }
          uni.showToast({
            title: res.msg,
            icon: 'none',
            mask: true,
          })
          setTimeout(function () {
            uni.redirectTo({
              url: '/pages_my/bangClub',
            })
            this.replaceLoading = false
          }, 1000)
        })
      },
      getcode() {
        if (!this.canClick) return
        this.show1 = true
      },
      Handle(success) {
        if (!this.canClick) return //改动的是这两行代码
        this.canClick = false
        this.show1 = false
        this.content = this.totalTime + 's后重新发送'
        this.$myRequest
          .get('/mob/login/phoneVerification.do', {
            phone: this.bindPhone,
          })
          .then((res) => {
            if (res.success) {
              this.code = res.CODE
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                mask: true,
              })
            }
          })
        let clock = setInterval(() => {
          this.totalTime--
          this.content = this.totalTime + 's后重新发送'
          if (this.totalTime < 0) {
            clearInterval(clock)
            this.content = '重新发送验证码'
            this.totalTime = 60
            this.canClick = true //这里重新开启
          }
        }, 1000)
      },
      aaa() {},
      jcbdCancel() {
        this.$refs.binds.close()
        this.yzm = ''
      },
      confirm44() {
        this.$refs.binds44.close()
      },
      confirm33() {
        this.$refs.binds33.close()
        let data = {}
        data = {
          userId: this.userInfo.id,
          codeId: this.codeId,
          licensePlatePhoto: this.headerImage[0],
          cellphoneNumber: this.phone,
          licensePlateNumber: this.licensePlate,
        }
        if (this.submitLoading) {
          return false
        }
        this.submitLoading = true
        this.$myRequest.post('/api/mobile/vehicleOwner/bindQRCode', data).then(
          (res) => {
            console.log(res, '70')
            if (res.code == '60029' || res.code == '60024') {
              // res.msg
              this.html = res.msg
              this.$refs.binds22.open()
            } else {
              if (res.whetherBind == '0') {
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  mask: true,
                })
                setTimeout(function () {
                  uni.redirectTo({
                    url: '/pages_my/bangClub',
                  })
                }, 1000)
              } else if (res.whetherBind == '1') {
                console.log('res.msg', res)
                this.bindPhone = res.msg.slice(-11)
                if (this.bindPhone.replace(/\d/g, '').length > 0) {
                  this.bindPhone = this.userInfo.phone
                }
                console.log(this.bindPhone)
                this.$refs.binds.open()
              }
            }
            setTimeout(() => {
              this.submitLoading = false
            }, 200)
          },
          (err) => {
            if (err.code == 60000) {
              this.submitLoading = false
            }
          }
        )
      },
      confirmBind() {
        let that = this
        // this.$refs.binds.open()
        if (!this.checkBoxs.length) {
          uni.showToast({
            title: '请同意用户条款',
            icon: 'none',
            duration: 1000,
          })
          return
        }
        if (this.headerImage.length == 0) {
          uni.showToast({
            title: '请选择车牌照片',
            icon: 'none',
            duration: 1000,
          })
          return
        }
        if (!uni.$u.test.carNo(this.licensePlate)) {
          uni.showToast({
            title: '请输入正确的车牌号',
            icon: 'none',
            duration: 1000,
          })
          return
        }

        this.$myRequest
          .get('/api/mobile/vehicleOwner/getLicensePlateNumberBindNum', {
            licensePlateNumber: this.licensePlate,
          })
          .then((res) => {
            console.log(res)
            if (res.boundNumber == 0) {
              this.confirm33()
              return
            }
            this.checkNum = Number(res.boundNumber) + 1
            if (this.checkNum > 3) {
              this.$refs.binds44.open()
            } else {
              this.$refs.binds33.open()
            }
            this.days = res.remainingDays
          })
        return
      },
      checkboxC(e) {
        this.checkBoxs = e.detail.value
      },
      async tags(type) {
        if (type == this.curTarget) {
          this.show = true
          return
        }
        this.type = type
        if (type == 2) {
          this.text = '隐私协议'
        } else if (type == 3) {
          this.text = '用户服务协议'
        }
        await this.getContent()
        this.curTarget = type
      },
      getContent() {
        let _this = this
        _this.$myRequest
          .get('/mob/user/getText', {
            type: this.type,
          })
          .then((res) => {
            this.data = res.list[0]
            //视图会发生重新渲染
            this.scrollTop = this.oldScrollTop
            //当视图渲染结束 重新设置为0
            this.$nextTick(() => {
              this.show = true
              this.scrollTop = 0
            })
          })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      async ChooseImages(menthType, type) {
        this.otherChooseImage()
      },
      otherChooseImage() {
        // #ifdef MP-WEIXIN
        this.showCroop = true
        this.$refs.croop.fSelect()
        //  #endif
        // #ifndef MP-WEIXIN
        this.$refs.gmyImgCropper.chooseImage(true)
        //  #endif
      },
      myUpload(rsp) {
        let filePath = ''
        // #ifndef MP-WEIXIN
        filePath = rsp
        // #endif
        // #ifdef MP-WEIXIN
        filePath = rsp.path
        this.showCroop = false
        //  #endif
        var _this = this
        this.headerImage = []
        var uper
        uni.showToast({
          title: '正在上传请稍后',
          icon: 'none',
          duration: 2000,
        })
        uper = uni.uploadFile({
          // 需要上传的地址
          url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
          // filePath 需要上传的文件
          filePath: filePath,
          name: 'file',
          success(res1) {
            _this.headerImage.push(JSON.parse(res1.data).data[0].url)
            _this.obtainLicense()
          },
        })
        // onProgressUpdate 上传对象更新的方法
        uper.onProgressUpdate(function (res) {})
      },
      DelImgfm(e) {
        uni.showModal({
          title: '',
          content: '确定要删除图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.headerImage.splice(e.currentTarget.dataset.index, 1)
              this.licensePlate = ''
            }
          },
        })
      },
      ViewImagefm(e) {
        uni.previewImage({
          urls: this.headerImage,
          current: e.currentTarget.dataset.url,
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  page {
    background-color: #fff;
  }

  .box {
    width: 100%;
    // padding-bottom: 20rpx;
    min-height: 100vh;
    background-color: #fff;
  }
  /deep/ .uni-popup {
    z-index: 101;
  }
  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #000;
    background-color: #fff;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;
    /* #endif */

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 28rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
      bottom: 16rpx !important;
      right: 30rpx;
      // #ifdef APP
      // top: 50%;
      // #endif
    }
  }
  .center {
    padding: 0 68rpx;
    .center_logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 70rpx;
      .image {
        width: 108rpx;
        height: 108rpx;
        margin-bottom: 12rpx;
      }
    }
    .uploadPhotos {
      display: flex;
      justify-content: space-between;
      .uploadPhotos_left {
        display: flex;
        flex-direction: column;
        .title {
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }
        .images {
          position: relative;
          width: 212rpx;
          height: 212rpx;
          border-radius: 8rpx;
          ::v-deep .solids {
            width: 100%;
            height: 100%;
            margin: 0;
          }
          ::v-deep .grid.grid-square {
            height: 100%;
          }
          .colse {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #f0f0f0;
            border-radius: 0 8rpx 0 8rpx;
          }
        }
      }
      .uploadPhotos_right {
        display: flex;
        flex-direction: column;
        .title {
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }
        .image {
          width: 212rpx;
          height: 212rpx;
          border-radius: 8rpx;
        }
      }
    }
    .from {
      display: flex;
      flex-direction: column;
      margin-top: 70rpx;
      margin-left: 20rpx;
      .from_phone {
        height: 100rpx;
        display: flex;
        align-items: center;
        .inputs {
          padding-left: 20rpx;
          margin-left: 30rpx;
          height: 70rpx;
          border-bottom: 1px solid #d0d0d0;
        }
      }
      .from_cp {
        height: 100rpx;
        display: flex;
        align-items: center;
        .inputs {
          padding-left: 20rpx;
          margin-left: 30rpx;
          height: 70rpx;
          border-bottom: 1px solid #d0d0d0;
        }
      }
    }
    .agreement {
      display: flex;
      padding-left: 10rpx;
      padding-top: 50rpx;
      font-size: 24rpx;
      align-items: center;

      .checkbox-group {
        // width: 50rpx !important;
        // height: 40rpx !important;
        /* #ifdef MP */
        width: 50rpx !important;
        height: 50rpx !important;
        /* #endif */
        /* #ifdef APP-PLUS || H5 */
        width: 32rpx !important;
        height: 32rpx !important;
        /* #endif */
      }

      .text {
        line-height: 37rpx;
        margin-left: 10rpx;
      }

      .tags {
        color: #64b6a8;
      }
    }
    .qrbd {
      width: 560rpx;
      height: 88rpx;
      background-color: #64b6a8;
      border-radius: 44rpx;
      font-size: 34rpx;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      margin-top: 40rpx;
    }
    .dibuwenb {
      font-size: 26rpx;
      font-weight: 400;
      color: #333333;
      line-height: 55rpx;
      margin-top: 60rpx;
    }
  }
  .motaikuang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100000;

    .verify {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .motaikuang1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;

    .text {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      left: 0;
      padding-top: 60rpx;
      padding-bottom: 100rpx;
      border-radius: 50rpx 50rpx 0 0;

      .textTitle {
        font-size: 36rpx;
        line-height: 50rpx;
        text-align: center;
        margin-bottom: 50rpx;
      }

      .scroll-view {
        height: 700rpx;
        margin: 0 auto;
        width: 630rpx;
      }
    }
  }
  .binds_frame {
    width: 600rpx;
    padding-top: 48rpx;
    padding-bottom: 90rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    text-align: center;
    position: relative;
    .binds_frame_t {
      font-size: 30rpx;
      font-weight: 550;
      color: #000000;
    }
    .binds_frame_c {
      width: 500rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #999999;
      margin: 30rpx auto;
    }
    .verificationCode {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 42rpx;
      .getcode {
        margin-left: 20rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #64b6a8;
      }
    }
    .binds_frame_b {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 90rpx;
      display: flex;
      .cancel {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f2f2f2;
        border-radius: 0px 0px 0px 10rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
      }
      .determine {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #64b6a8;
        border-radius: 0px 0px 10rpx 0px;
        font-size: 30rpx;
        font-weight: 400;
        color: #fff;
      }
    }
  }
  .grid.col-4.grid-square > .solids {
    width: 160rpx;
    height: 160rpx;
  }
  .cu-form-group {
    padding: 0;
  }
  .checked {
    background: #007aff;
  }
  /deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
    border-color: #64b6a8;
  }
  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border-color: #64b6a8 !important;
  }

  /deep/ .uni-checkbox-input {
    border-color: #666;
    background: #fff;
  }
  /deep/ .u-code-input__item__line {
    width: 36rpx !important;
    height: 2px !important;
  }
  /deep/ .u-code-input__item {
    width: 36rpx !important;
    margin-right: 10rpx !important;
  }

  .uni-popup-wrapper {
    width: 600rpx;
    background: #ffffff;
    border-radius: 10rpx;
    opacity: 1;
    padding: 0 32rpx;
    text-align: center;
    overflow: hidden;
  }

  .uni-popup-title {
    margin-top: 32rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    line-height: 30rpx;
  }

  .uni-popup-content {
    padding: 30rpx 32rpx 40rpx 32rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    line-height: 42rpx;
  }

  .uni-popup-btn-one {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: #64b6a8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    font-size: 30rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 30rpx;
    margin-bottom: 32rpx;
  }

  .uni-popup-mark {
    color: #e00000;
  }

  .uni-popup-tip {
    font-size: 20rpx;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
    margin: 10rpx auto;
  }

  .uni-popup-btn-wrapper {
    display: flex;
    width: 100%;
  }

  .uni-popup-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 30rpx;
    font-weight: 400;
    opacity: 1;
    border-radius: 0;

    &.left {
      background: #f2f2f2;
      color: #333333;
    }

    &.right {
      background: #64b6a8;
      color: #ffffff;
    }
  }

  .uni-popup-list {
    margin: 0 22rpx 32rpx 22rpx;

    .uni-popup-item {
      margin-top: 20rpx;

      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      line-height: 39rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
